<template>
  <div style="height: calc(100vh - 160px);">
    <div style="margin-bottom: 20px;border-radius: 10px;">
      <el-input
          v-model="search1"
          placeholder="请输入标题查询"
          style="width: 280px; padding-right: 20px; padding-bottom: 10px;color: #96b784"
      />
      <el-input
          v-model="search2"
          placeholder="请输入用户名查询"
          style="width: 280px; padding-right: 20px; padding-bottom: 10px;color: #96b784"
      />
      <el-select
          v-model="search3"
          clearable
          placeholder="请选择状态"
          style="width: 280px; padding-right: 20px; padding-bottom: 10px;color: #96b784"
      >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <el-button class="search" @click="getApplicationList()" type="primary" plain
                 style=" margin-left: 10px; margin-bottom: 10px"
      >搜索</el-button
      >
      <el-button @click="resetSearch()" type="warning" plain
                 style=" margin-left: 10px; margin-bottom: 10px"
      >重置</el-button
      >
    </div>

    <el-card class="table-card">
      <!-- 表格内容 -->
      <el-table :data="users" table-layout="fixed" :show-overflow-tooltip="false" class="application-table" style="width: 100%;">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="articleId" label="序号" width="50" />
        <el-table-column label="封面" width="70">
          <template #default="scope">
            <img :src="scope.row.coverImg" alt="文章封面" style="width: 40px ; height: 40px; border-radius: 10%;" />
          </template>
        </el-table-column>
        <el-table-column prop="title"   label="文章标题"  min-width="120px" />
        <el-table-column prop="applicationTime"   label="申请时间"  min-width="165px" />

        <el-table-column prop="content"  label="文章内容" min-width="120px">
          <template #default="scope">
            <el-button type="success" @click="content(scope.row)">点击查看</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="auditStatus" label="审核状态" min-width="114px">
          <template #default="scope">
            <el-button
                v-if="scope.row.auditStatus === '待审核'"
                type="info"
                plain
                disabled>
              {{ scope.row.auditStatus }}
            </el-button><el-button
                v-else-if="scope.row.auditStatus === '审核通过'"
                type="success"
                plain
                disabled>
              {{ scope.row.auditStatus }}
            </el-button>
            <el-button
                v-else-if="scope.row.auditStatus === '审核失败'"
                type="danger"
                plain
                disabled>
              {{ scope.row.auditStatus }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="申请人" min-width="100px" align="center"/>
        <el-table-column prop="auditorId" label="审核员" min-width="100px" align="center">
          <template #default="scope">
            <span v-if="scope.row.auditorId === 1">admin</span>
            <span v-else>{{ scope.row.auditorId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditReason" label="拒绝理由" min-width="140px" align="center"/>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                @click="success(scope.row)"
                type="primary"
                plain
                style="margin-right: 10px"
                class="action-btn"
            >
              <el-icon><Check /></el-icon>
              <span>审核</span>
            </el-button>


          </template>
        </el-table-column>
      </el-table>
      <el-dialog
          v-model="success1"
          title="审核操作"
          width="500"
          :modal="true"
          :close-on-click-modal="false"
          custom-class="audit-dialog"
      >
        <el-form :model="form1" label-position="top">
          <el-form-item label="审核状态" :label-width="formLabelWidth">
            <el-select
                v-model="form1.auditStatus"
                placeholder="请选择审核结果"
                class="audit-select"
                @change="handleAuditStatusChange"
            >
              <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
              v-if="form1.auditStatus === '审核失败'"
              label="拒绝原因"
              :label-width="formLabelWidth"
              class="reason-input"
          >
            <el-input
                v-model="form1.auditReason"
                autocomplete="off"
                type="textarea"
                :rows="3"
                placeholder="请输入拒绝原因"
                show-word-limit
                maxlength="200"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button
                @click="success1 = false"
                class="cancel-btn"
            >
              取消
            </el-button>
            <el-button
                type="primary"
                @click="editApplication"
                class="confirm-btn"
                :loading="isSubmitting"
            >
              确认提交
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 分页 -->
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background
          :page-sizes="[12, 15, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalUsers"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
      />
      </el-card>

  </div>
  <!-- 文章内容对话框 -->
  <el-dialog
      v-model="contentDialogVisible"
      title="文章内容"
      width="60%"
      align-center
      class="content-dialog"
      style=" "
      :close-on-click-modal="false"
  >
    <div v-html="process" class="markdown-content"></div>
    <template #footer>
      <el-button @click="contentDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.search-input :deep(.el-input__inner),
.search-select :deep(.el-input__inner) {
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  border-color: #dcdfe6;
  transition: all 0.3s;
}

.search-input :deep(.el-input__inner):focus,
.search-select :deep(.el-input__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}



/* 表格区域样式 */
.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: none;
}

.application-table {
  width: 100%;
  height: calc(100vh - 250px);
  border-radius: 8px;
  overflow: hidden;
}

.application-table :deep(th) {
  background-color: #f8fafc;
  color: #606266;
  font-weight: 600;
}

.application-table :deep(tr:hover td) {
  background-color: #f5f7fa !important;
}

.application-table :deep(.el-table__row) {
  transition: all 0.3s;
}

.application-table :deep(.el-table__row:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  justify-content: center;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/* 操作按钮样式 */
.action-btn {
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
}

/* 对话框样式 */
:deep(.audit-dialog) {
  border-radius: 12px;
  background: linear-gradient(145deg, #f5f7fa, #ffffff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

:deep(.audit-dialog .el-dialog__header) {
  border-bottom: 1px solid #eee;
  margin-right: 0;
}

:deep(.audit-dialog .el-dialog__title) {
  color: #333;
  font-weight: 600;
}

/* 选择框样式 */
.audit-select {
  width: 100%;
}

.audit-select :deep(.el-input__inner) {
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
}

/* 拒绝原因输入框 */
.reason-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  resize: none;
  transition: border-color 0.3s;
}

.reason-input :deep(.el-textarea__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 对话框按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.cancel-btn {
  transition: all 0.3s;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.confirm-btn {
  transition: all 0.3s;
  background: linear-gradient(to right, #409eff, #337ecc);
  border: none;
}

.confirm-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.confirm-btn:active {
  transform: translateY(0);
}
</style>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';
import request from "@/api/request";
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import VueMarkdownEditor, {xss} from "@kangc/v-md-editor";
interface Application {
  id: number ;
  userPic: string;
  username: string;
  nickname: string;
  phone: string;
  email: string;
  creatTime: any;
  auditReason: string;
  auditStatus: string;
}
const search3 = ref('')
const value = ref('')
const options = [
  {
    value: '待审核',
    label: '待审核',
  },
  {
    value: '审核通过',
    label: '审核通过',
  },
  {
    value: '审核失败',
    label: '审核失败',
  },
]
const options1 = [
  {
    value: '审核通过',
    label: '审核通过',
  },
  {
    value: '审核失败',
    label: '审核失败',
  },
]
import { Check } from '@element-plus/icons-vue'
const isSubmitting = ref(false)
const process = ref('')
const contentDialogVisible = ref(false);
//--------------------------------------------------------------文章内容
import { h } from 'vue';
import { ElDialog, ElScrollbar } from 'element-plus';

const content = (row: any) => {
  const renderedHtml = VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(row.content); // 将 Markdown 转换为 HTML
  process.value = xss.process(renderedHtml);
  contentDialogVisible.value = true;
};



const users = ref<Application[]>([]);
const search1 = ref('');
const search2 = ref('');

const success1 = ref(false)
const formLabelWidth = '120px'
const form = reactive({
  auditReason: '',
  auditStatus:'',
})
const form1 = reactive<{
  id: number | null; // 允许 id 为 number 或 null
  auditReason: string;
  auditStatus: string;
}>({
  id: null,
  auditReason: '',
  auditStatus: '',
});
// ----------------------------------------------获取用户列表
const getApplicationList = () => {
  request.get('/application/getAllApplication', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      title: search1.value,
      username: search2.value,
      auditStatus: search3.value,
    },
  }).then((res: any) => {
    users.value = res.data.items; // 假设返回的数据结构是这样的
    totalUsers.value = res.data.total; // 假设返回的总数在这里
    if (res.data.total.length === 0){
      ElMessage.warning('不存在该用户');
    }
  }).catch((error: any) => {
    console.error('获取用户失败:', error); // 处理错误
  });
};

const handleAuditStatusChange = (value: any) => {
  if(value === '审核通过') {
    form1.auditReason = ''
  }
}

//-----------------------------------------------------编辑申请------------------------------------------
const success = (application: Application) => {
  form1.id = application.id; // 设置用户 ID
  form1.auditReason = application.auditReason;
  form1.auditStatus = application.auditStatus;
  success1.value = true;
};
const editApplication = async () => {
  isSubmitting.value = true
  try {
    await request.put('/application/auditApplication', {
      id: form1.id,
      auditReason: form1.auditReason,
      auditStatus: form1.auditStatus,
    })
    getApplicationList()
    success1.value = false
    ElMessage.success('操作成功')
  } catch (error: any) {
    ElMessage.error(error.message || '操作失败')
  } finally {
    isSubmitting.value = false
  }
}

//----------------------------------------------------------------------------分页相关----------------------
const pageNum = ref(1); // 从1开始
const pageSize = ref(12);
const totalUsers = ref(0); // 用于存储总用户数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize.value = val; // 更新页面大小
  getApplicationList(); // 更新用户列表
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageNum.value = val; // 更新当前页码
  getApplicationList(); // 更新用户列表
};
//-------------------------------------------------------------------------重置搜索框
const resetSearch = () => {
  search1.value = ''
  search2.value = ''
  search3.value = ''
  getApplicationList()
};

onMounted(() => {
  getApplicationList(); // 组件挂载时获取用户列表
});
</script>

